<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 保持原有的HTML结构不变 -->
    <!-- <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function(){
            // 优化：一次性设置所有div的颜色，减少jQuery对象的创建
            var colors = ["red","blue","sky"];
            $('div').css('color', function(index) {
                // 防止数组索引越界，利用取模运算
                return colors[index % colors.length];
            });

            // 问题1修复：明确声明sum变量
            let sum = 0;

            // 优化：使用$.each代替$("div").each，显式限制循环次数防止数组索引越界
            $.each($('div'), function(i, domEle) {
                // 直接在each中使用传入的domEle，无需再通过$("div").eq(i)
                console.log(i);
                console.log(domEle);
                let textValue = $(domEle).text();
                if (!isNaN(textValue)) {
                    sum += parseInt(textValue);
                }
            });

            // 输出sum变量，确保放在$(function(){})内部，以保证执行顺序
            console.log(sum);
        });
    </script> -->
    <!-- <div>
        <ul>
            <li></li>
        </ul>
    </div>
    <script> -->
    <!-- // $.each({
    //     name:"andy",
    //     age:18
    // },function(i,ele){
    //      console.log(i); 
    //     //   输出name,age属性名; -->
    <!-- //     console.log(ele); -->
    <!-- console.log(ele);输出Andy 18属性值 -->
<!-- 
    // })
    
    //添加元素
    // element.after("...");
    // element.before("...");
    // 内部生成元素，生成之后他们是父子关系


    //外部添加，生成之后他们是兄弟关系
    // Element.after("...");
    // Element.before("...");//内容放在目标元素前面

//     // 1.内部添加
// $("ul").append(li);//内部添加，并放到元素的最后面
// $("ul").prepend(li);//内部添加，并放到元素的最前面

//2.外部添加
// $("ul").after(li);//外部添加，并放到元素的后面
// $("ul").before(li);//外部添加，并放到元素的前面

// //3.删除元素
// $("ul").remove();//可以删除匹配的元素（自杀）
// $("ul").empty();//删除匹配的元素下的所有子元素
// $("ul").html();//删除匹配的元素下的所有子元/
// //4.替换元素
// $("ul").replaceWith("<div>123</div>");//替换匹配的元素
// $("ul").replaceAll("div");//替换匹配的元素

// //5.复制元素
// $("ul").clone();//复制匹配的元素
// $("ul").clone(true);//复制匹配的元素，并复制其子元素 -->
    <!-- </script>
 -->
<style>
    /* div ul {
        display: flex;
    }
    div ul li {
        float: left;
    } */
    .current {
       color: red;
    }
</style>
 <div class=".tab-list">
<ul>
    <li class="current"></li> <li class="current"></li>
    <li class="current"></li><li class="current"></li>
    <li class="current"></li>
    <li class="current"></li>
    </ul>
<div class="tab_con">
    <ul>
        <li></li> <li></li> <li></li>
    </ul>
</div>
</div>
<script>
    $(function(){
        $(".tab-list li").click(function(){
            $(this).addClass("current").siblings().removeClass("current");
            var index = $(this).index();
            console.log(index);
            $(".tab_con .item").eq(index).show().siblings().hide();
    });
</script>
 </body>
</html>